<template>
  <div class="page ">
    <div class="page-item">
        <div class="page-title"> checkbox 功能验证：</div>
        <div class="page-flex">
            <label>disabled功能验证：</label>
            <ekRadio v-model="fromtest.disabled" :options="[
            {
                value: true,
                label: '启用',
            },
            {
                value: false,
                label: '禁用',
            }
            ]"
            />
      </div>
      <div class="page-flex">
            <label>切换options数据功能验证：</label>
            <el-button  @click="testData(1)" class="mt-btn">清空数据</el-button>
            <el-button  @click="testData(2)" class="mt-btn">数据1</el-button>
            <el-button  @click="testData(3)"  class="mt-btn">数据2</el-button>
      </div>
      <div class="page-flex">
            <label>测试网络差环境下情况：</label>
            <el-button  @click="testne()" class="mt-btn">测试</el-button>
      </div>
      <div class="page-flex mt-btn">
        <label>change功能验证：{{ fromtest.change }}</label>
      </div>
    </div>
    <div class="page-item">
        <div>
            <ekCheckbox 
                v-if="show"
                v-model="form.checkbox" 
                :disabled="fromtest.disabled" 
                @change="change"
                url="/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE"
            />
        </div>
        <div>
            <ekCheckbox 
                v-model="form.checkbox2" 
                :disabled="fromtest.disabled" 
                @change="change"
                :options="options"
            />
        </div>
        <formRender :form="form" :columns="columns" ref="forms"  @change="change" />
        <el-button  @click="test" class="mt-btn">测试{{fromtest.disabled}}</el-button>
    </div>
    
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, reactive, ref} from "vue";
import formRender from "@/components/form/formRender.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekCheckbox from "@/components/form/ekCheckbox/index.vue";

let fromtest = ref( {
  disabled: false
})
let form = reactive({
  checkbox: ['0'],
  checkbox2: [],
  checkbox3: []
});
const options = ref([
    {
        value: 'success',
        label: '选项1',
    },
    {
        value: 'fail',
        label: '选项2',
    },
    {
        value: 'error',
        label: '选项3',
    }
])
const testData = (type) =>{
    if(type == 2){
        options.value= [
            {
                value: 'success',
                label: 'success',
            },
            {
                value: 'fail',
                label: 'fail',
            },
            {
                value: 'error',
                label: 'error',
            }
        ]
    } else if(type ==3) {
        options.value= [
            {
                value: '1',
                label: '1',
            },
            {
                value: '2',
                label: '2',
            },
            {
                value: '3',
                label: '3',
            }
        ]
    } else {
         options.value= [];
    }
}
let columns = ref([
  {
    type: "Checkbox",
    column: "checkbox3",
    label: "checkbox3",
    url: "/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    rules: [{ required: true, message: "请选择复选框", trigger: "blur" }],
    disabled: false,
  },
]);
const forms = ref(null)
const test = () => {
    console.log(form)
    forms.value.validate(()=>{

    });
};
const show = ref(true);
const testne = () =>{
    show.value = false;
    setTimeout(()=>{
        show.value = true;
    }, 1000)
}

// 改变事件
const change  = (event) => {
    fromtest.value.change = 'change事件:' + JSON.stringify(event);
  console.log(event, 'change')
};

</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
  display: flex;
    .page-item {
        border: 1px solid #fff;
        padding: 10px;
            margin: 10px;
    }
  .page-title {
    font-size: 16px;
  }
  .page-flex {
    display: flex;
    align-items: center;
  }
  .mt-btn {
    margin-top: 10px;
  }
}
</style>
